import { useContext } from 'react';
import { List, Image } from 'antd-mobile';
import { MySdkStoreContext } from '../../../context';

import './style.scss';
import AvatarImage from '../../AvatarImage';

export default function(props) {
  const extInfo = props.extInfo || props.msgContent.extInfo;
  const mySdkStore = useContext(MySdkStoreContext);
  const sendByme = props.from?.userId === mySdkStore.mockConfig.userId;

  return <div className='userCardComponent'>
    <List style={{ '--border-top': '0', '--padding-left': 0 }} className={sendByme ? 'rightCardContent' : ''}>
        <List.Item
          prefix={<AvatarImage src={extInfo.avatarUrl} nickName={extInfo.nickName} userName={extInfo.userName} userId={extInfo.userId} style={{ borderRadius: 8 }} fit='cover' width={40} height={40} />}
        >
          { extInfo.nickName || extInfo.userName || extInfo.userId }
      </List.Item>
    </List>
    <div style={{ fontSize: 12 }}>个人名片</div>
  </div>
}